<template>
	<view class="main away-top">
		<common-nav-bar :home="true" :cart="true" :category="true" :my="true" :viewed="true" :sticky="true">
			<view slot="content">订单详情</view>
		</common-nav-bar>
		<view class="content" v-if="goods">
			<view class="bg">
				<view class="status">
					<view class="view">
						<image class="image" v-if="waitForPay" src="@/static/img/order/wait.svg" alt="" />
						<image class="image" v-else-if="waitForTake" src="@/static/img/order/wait.svg" alt="" />
						<image class="image" v-else-if="isCanceled" src="@/static/img/order/canceled.svg" />
						<image class="image" v-else-if="isCompleted" src="@/static/img/order/completed.svg" alt="" />
						{{ statusText }}
					</view>
					<view class="view" v-if="waitForPay && expire" style="font-size:1.2rem;">
						{{getTime(expire)}}
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="block" v-if="receiverInfo">
					<image class="image" src="@/static/img/order/address.svg" alt="" />
					<view class="address">
						<view>
							<text style="margin-right: 10rpx;">{{ receiverInfo.receiver }}</text>
							<text> {{ formatePhone }}</text>
						</view>
						<view class="addText">
							{{ fullAddress }}
						</view>
					</view>
				</view>

				<order-good :goods="goods" />
				<view class="orderInfo block">
					<view v-if="created">
						<text style="color: gray">下单时间: </text>
						<text>{{ created }}</text>
					</view>
					<view v-else-if="payed">
						<text style="color: gray">支付时间: </text>
						<text>{{ payed }}</text>
					</view>
					<view v-else-if="received">
						<text style="color: gray">收货时间: </text>
						<text>{{ received }}</text>
					</view>
					<view v-else-if="isCanceled">
						<text style="color: gray">取消时间: </text>
						<text>{{ expired }}</text>
					</view>
					<text class="price">
						<text class="bold-pay">{{ priceText }}</text>
						<text class="price-sum">¥{{ price }}</text>
					</text>
				</view>
			</view>

			<view class="Btns">
				<view  @click="buyAgain" class="margin-left-20 view">再次购买</view>
				<view  style="background-color: #f73c24;color: white;" v-if="waitForPay" class="margin-left-20 view" @click="paying = true">去付款</view>
				<view  style="background-color: #f73c24;color: white;" v-else-if="waitForTake" class="margin-left-20 view" @click="receive">确认收货</view>
			</view>
		</view>
		<pay-order v-if="paying" :price="price" :self="true" @close="paying = false" @success="" />
		<recommend ref="recommend" />
	</view>
</template>

<script>
	import CommonNavBar from "components/common/NavBar/CommonNavBar";
	import {
		getOrderDetail,
		selectAddress,
		receiveOrder
	} from "network/user";
	import OrderGood from "components/common/Order/OrderGood";
	import Recommend from "components/common/Recommend/Recommend";

	import payOrder from "pages/cart/pay/payOrder";

	import {
		debounce
	} from "common/utils";
	import {
		mapMutations
	} from "vuex";
	export default {
		components: {
			CommonNavBar,
			OrderGood,
			Recommend,
			payOrder,
		},
		data() {
			return {
				op: "再次购买",
				statusCode: 3,
				receiverInfo: null,
				goods: null,
				count: null,
				price: null,
				created: null,
				expired: null,
				expire:null,
				received: null,
				payed: null,
				paying: false,
				i: 0,
			};
		},
		computed: {
			img() {
				return "@/static/img/order/completed.svg";
			},
			waitForPay() {
				return this.statusCode === 0;
			},
			waitForTake() {
				return this.statusCode === 1;
			},
			isCanceled() {
				return this.statusCode === 2;
			},
			isCompleted() {
				return this.statusCode === 3;
			},
			statusText() {
				switch (this.statusCode) {
					case 0:
						return "等待付款";
					case 1:
						return "等待收货";
					case 2:
						return "已取消";
					case 3:
						return "已完成";
					default:
						return "";
				}
			},

			fullAddress() {
				return (
					this.receiverInfo?.province +
					this.receiverInfo?.city +
					this.receiverInfo?.address
				);
			},

			formatePhone() {
				return (
					this.receiverInfo?.phone?.slice(0, 3) +
					"****" +
					this.receiverInfo?.phone?.slice(7)
				);
			},

			priceText() {
				return this.payed ? "实付金额：" : "需付款：";
			},
		},
		watch: {},
		methods: {
			...mapMutations(["addShop"]),
			formateTime(time) {
				return (
					time.toLocaleDateString().replace(/\//g, "-") +
					"  " +
					time.toTimeString().slice(0, 9)
				);
			},

			getTime(expire) {
				let timer = new Date(new Date(expire).getTime() - Date.now());
				let hours = timer.getHours(),
					minutes = timer.getMinutes();
				if (hours === 0 && minutes === 0) {
					return `23小时59分钟`;
				}
				return `${hours}小时${minutes}分钟`;
			},
			buyAgain() {
				let data = this.goods;
				for (let shop in data) {
					for (let good in data[shop].goods) {
						let {
							goodId,
							price,
							title,
							cover,
							count
						} = data[shop].goods[good],
							belonging = shop;
						let goodInfo = {
							goodId,
							price,
							title,
							cover,
							belonging,
							count
						};
						this.addShop({
							shopId: shop,
							shop: data[shop].info,
							goodId: good,
							good: goodInfo,
						});
					}
				}
				// this.$router.push("/cart");
				uni.switchTab({
					url: "/pages/cart/Cart"
				})
			},
			receive() {
				let i = this.i;

				uni.showModal({
					title: "确认收货",
					content: `确认收货?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							await receiveOrder(JSON.stringify({
								i
							})).then(async (res) => {
								if (res[1].data.tag) {
									this.success("已确认收货");
									await this.reload();
								}
							});
						} else {
							this.info('已取消');
						}
					},
				})


			},
		},
		onLoad({
			i
		}) {
			console.log('onload', i);
			this.i = i;
			getOrderDetail(this.i).then((res) => {
				let result = res[1].data.data[0];
				console.log('result',result);
				this.expire = result.expire;
				if (result.canceled) {
					this.statusCode = 2;
				} else if (result.received) {
					this.statusCode = 3;
				} else if (result.payed) {
					this.statusCode = 1;
				} else {
					this.statusCode = 0;
				}
				this.created = result.created ?
					this.formateTime(new Date(result.created)) :
					null;

				if (result.canceled) {
					this.expired = this.formateTime(
						new Date(new Date(result.expire).getTime() + 60 * 60 * 8 * 1000)
					);
				}
				this.received = result.received ?
					this.formateTime(
						new Date(new Date(result.received).getTime() + 60 * 60 * 8 * 1000)
					) :
					null;
				this.payed = result.payed ?
					this.formateTime(
						new Date(new Date(result.payed).getTime() + 60 * 60 * 8 * 1000)
					) :
					null;

				this.goods = JSON.parse(result.data);
				this.price = result.price;
				this.count = result.count;
				selectAddress(result.address_i).then((res) => {
					console.log('selectAddress', res)
					this.receiverInfo = res[1].data.data[0];
				});
			});
		},

	};
</script>
<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100%;
	}

	.content {
		padding-top: 90rpx;
		width: 100vw;
	}

	.bg {
		color: #fff;
		display: flex;
		flex-direction: column;
		height: 160rpx;
		align-items: center;
		justify-content: flex-start;
		padding-top: 40rpx;
		background-image: linear-gradient(270deg, #ff4142, #ff4b2b);
		margin-bottom: -30rpx;
	}

	.status {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 1.4rem;
		/* #ifdef H5 */
		gap: 10rpx;

		/* #endif */

		.image {
			width: 64rpx;
			height: 64rpx;
		}
	}



	.status .view:nth-child(1) {
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		gap: 5px;
		/* #endif */
	}

	.btn {
		margin-top: 30rpx;
		background: #fff;
		box-shadow: 0 8px 16px 0 rgba(231, 0, 28, 14%),
			inset 0 -8rpx 12rpx 0 rgba(255, 198, 198, 77%);
		border-radius: 40rpx;
		color: #f2270c;
		padding: 20rpx 76rpx;
		line-height: 28rpx;
		font-size: 1rem;
	}

	.detail {
		width: 100vw;
	}

	.block {
		width: 100vw;
		padding: 20rpx 2vw;
		box-sizing: border-box;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		/* #ifdef H5 */
		gap: 2vw;
		/* #endif */

		.image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.address {
		display: flex;
		flex-direction: column;
	}

	.addText {
		color: rgb(153, 153, 153);
		font-size: 0.9rem;
	}

	.orderInfo {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		flex-direction: column;
		width: 100vw;
		align-items: flex-start;
	}

	.Btns {
		display: flex;
		flex-direction: row-reverse;
		justify-content: right;
		width: 100vw;
		padding: 0 2vw;
		box-sizing: border-box;
		align-items: center;
		position: fixed;
		bottom: 0;
		background-color: white;
		height: 7.4vh;
		z-index: 10;
		box-shadow: 0 0 30rpx rgba(160, 160, 160, 69%);
	}

	.Btns > .view {
		width: 160rpx;
		color: #f2270c;
		border: 2rpx solid #f2270c;
		box-shadow: 0 6rpx 12rpx 0 rgba(242, 39, 12, 10%);
		padding: 0 20rpx;
		text-align: center;
		min-width: 108rpx;
		height: 70rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}



	.price {
		margin-top: 10rpx;
		border-top: 2rpx solid rgb(240, 240, 240);
		width: 100%;
		padding: 10rpx 0;
		box-sizing: border-box;
		height: 120rpx;
		line-height: 120rpx;
		text-align: right;
	}

	.bold-pay {
		font-size: 1.2rem;
		font-weight: 600;
	}

	.price-sum {
		color: #f2270c;
		font-weight: 600;
	}

	.margin-left-20 {
		margin-left: 20rpx;
	}
</style>
